// 设置头搜索框
(function() {
	var isf = false;
	$(".search").on("transitionend", function() {
		if($(".search").hasClass("activate")) {
			isf = true;
			$("#searchText").focus();
		} else {
			isf = false;
		}
	})
	$("#searchAn").on("click", function() {
		!isf ? $(".search").addClass("activate") : null;
	})
	$("#searchText").focusout(function() {
		$(".search").removeClass("activate");
	})
})();

//设置导航样式
(function() {
	$('<div id="focus"></div>').appendTo(".navi ul");
	var oneID, temp, An;

	function setShow(obj) {
		temp = $('.navi_page div[key="' + obj.attr("pageKey") + '"]');
		oneID = setTimeout(function() {
			$(".navi ul #focus").css({
				"width": obj.width(),
				"left": obj.position().left
			})
			temp.length != 0 ? $('.navi_page').addClass("show") : $('.navi_page').removeClass("show");
		}, 190)
	}

	function setHidd() {
		oneID = setTimeout(function() {
			$(".navi ul #focus").css("width", '0')
			$('.navi_page').removeClass("show");
		}, 100)
	}

	$('.head_top').on('mouseover', function(e) {
		setHidd();
	})

	$(".navi ul li").on("mouseleave", function(e) {
		clearTimeout(oneID)
	})

	$(".navi ul li").on("mouseenter", function(e) {
		e.stopPropagation()
		setShow($(this));
	})

	$(".head_wrap").on("mouseleave", function(e) {
		setHidd();
	})

	$('.hidePage').on('click', function() {
		setHidd();
	})
})();

// 加载JSON头部内容
! function() {
	var Myjson;
	var timeID;

	function NaviPage(data) {
		Myjson = data;
		addPageWrap();
		addPagedata();
	}

	// 加载一级导航选项页
	function addPageWrap() {
		var temp;
		$('.navi ul li').each(function() {
			temp = Myjson[$(this).attr("pageKey")];
			if(temp != null) {
				if(temp[0]['level1'] != null || temp[0]['tplType'] != null) {
					$('<div>', {
						key: $(this).attr("pageKey"),
						class: 'selContent maxWidth clearfix'
					}).appendTo($('.navi_page .page_content'));

					$(this).on("mouseenter", function() {
						(function(obj) {
							timeID = setTimeout(function() {
								$('.page_content>div').css("display", "");
								$('.page_content>div[key="' + obj.attr("pageKey") + '"]').css('display', 'block');
							}, 170)
						})($(this));
					})
					$(this).on('mouseleave', function() {
						clearTimeout(timeID);
					})
				}
			}
		})
	}

	// 加载二级选项卡 ------------------------------------------------------------
	function addLevel(obj, data, big, key, addHtml) {
		var wrap, ul, li, sel, selDiv, index = 0;
		wrap = $('<div>').addClass('TabControl clearfix');
		big ? wrap.addClass("big") : null;
		ul = $('<ul class="fl">').appendTo(wrap);
		sel = $('<div>').addClass('SelContent').appendTo(wrap);
		$.each(data, function(name, val) {
			li = $('<li>').attr("selKey", key ? key + '-' + index : val['key']);
			val['link'] ? $('<a>').attr('href', '').text(val['text'] + ' >').appendTo(li) : li.text(val['text']);
			li.appendTo(ul);
			selDiv = $('<div>').attr('mKey', key ? key + '-' + index : val['key']);
			if(addHtml) {
				addHtml(selDiv, val);
			}
			selDiv.appendTo(sel);
			index++;
			li.on('mouseenter', function() {
				(function(obj) {
					timeID = setTimeout(function() {
						ul.find('#focus').css('top', obj.position().top);
						sel.children('div').css('display', "");
						sel.children('div[mkey="' + obj.attr('selKey') + '"]').css('display', 'block')
					}, 170)
				})($(this))
			})
			li.on('mouseleave', function() {
				clearTimeout(timeID);
			})
		})
		sel.find('div').first().css('display', 'block');
		$('<div>').attr("id", "focus").appendTo(ul);
		wrap.appendTo(obj);
	}

	// 添加三级选项卡 模版1------------------------------------------------------------
	function addTpl1(obj, key) {
		var temp, ul, li, a;
		$.each(Myjson['tpl1'], function(name, val) {
			if(val['key'] == key) {
				addLevel(obj, val['items'], false, val['key'], function(con, ret) {
					if(ret['itemsCategory']) {
						ul = $('<ul class="tpl1 clearfix">');
						li = $('<li><li>');

						$.each(ret['itemsCategory'], function(name1, val1) {
							a = val1['child'] ? $('<div class="childwrap">') : a = $('<a href="" class="aWrap">');
							if(val1['tips'] == 'new') {
								$('<div class="extext">').html(val1['h3'] + ' <img src="img/new.png"/>').appendTo(a);
							} else {
								$('<div class="extext">').html(val1['h3']).appendTo(a);
							}
							$('<div class="eotext">').html(val1['p']).appendTo(a);

							if(val1['child']) {
								temp = val1['child'].replace(/href='.*?'/g, 'href=""');
								$('<div class="iteChild clearfix">').html(temp).appendTo(a);
								a.appendTo(li.eq(0));
							} else {
								a.appendTo(li.eq(1));
							}

						})
						li.appendTo(ul);
						ul.appendTo(con);
					} else if(ret['items']) {
						ul = $('<ul class="tpl1 clearfix">');
						$.each(ret['items'], function(name1, val1) {
							li = $('<li>').appendTo(ul);
							a = $('<a class="aWrap">').attr('href', "").appendTo(li);
							if(val1['tips'] == 'new') {
								$('<div class="extext">').html(val1['h3'] + ' <img src="img/new.png"/>').appendTo(a);
							} else {
								$('<div class="extext">').html(val1['h3']).appendTo(a);
							}
							$('<div class="eotext">').html(val1['p']).appendTo(a);
						})
						ul.appendTo(con);
					}
				})
				return;
			}
		});
	}

	// 添加三级选项卡 模版6------------------------------------------------------------
	function addTpl6(obj, key) {
		var ul, li, a, div, index;
		$.each(Myjson['tpl6'], function(name, val) {
			if(val['key'] == key) {
				addLevel(obj, val['items'], false, val['key'], function(con, ret) {
					ul = $('<ul class="tpl6 clearfix">');
					$.each(ret['items'], function(name1, val1) {
						li = $('<li>');
						a = $('<a class="aWrap">').attr('href', "").appendTo(li);
						if(val1['tips'] == 'new') {
							$('<div class="extext">').html(val1['h3'] + ' <img src="img/new.png"/>').appendTo(a);
						} else {
							$('<div class="extext">').html(val1['h3']).appendTo(a);
						}
						index = 0;
						if(val1['tabText1']) {
							div = $('<div class="tpl6_But">').appendTo(li);
							$('<a href="">').html(val1['tabText1']).appendTo(div);
							index = 1;
						}
						if(val1['tabText2']) {
							$('<a href="">').html(val1['tabText2']).appendTo(div)
							index = 2;
						}
						if(val1['tabText3']) {
							$('<a href="">').html(val1['tabText3']).appendTo(div)
							index = 3;
						}

						if(index) {
							div.children('a').css('width', (100 / index) + "%");
						}

						$('<div class="eotext">').html(val1['p']).appendTo(a);
						li.appendTo(ul);
					})
					ul.appendTo(con);
				})
				return;
			}
		})
	}

	// 添加三级选项卡 模版2、3、5------------------------------------------------------------
	function addTplASD(obj, key, type) {
		var Dul, Dli, ul, li, a, temp;
		$.each(Myjson['tpl' + type], function(name, val) {
			if(val['key'] == key) {
				if(type == 2) {
					Dul = $('<ul class="tpl2 clearfix">');
				} else if(type == 3) {
					Dul = $('<ul class="tpl3 clearfix">');
				} else if(type == 5) {
					Dul = $('<ul class="tpl5 clearfix">');
				}
				$.each(val['items'], function(name1, val1) {
					Dli = $('<li>');
					if(val1['link']) {
						$('<a href="" class="hover">').html(val1['title'] + ' >').appendTo(Dli);
					} else {
						$('<a>').html(val1['title']).appendTo(Dli);
					}
					ul = $('<ul>');
					$.each(val1['items'], function(name2, val2) {
						li = $('<li>');
						temp = val2['tips'] == 'new' ? ' <img src="img/new.png"/>' : '';
						if(val2['p']) {
							a = $('<a href="">');
							$('<div class="extext2">').html(val2['text'] + temp).appendTo(a);
							$('<div class="eotext2">').html(val2['p']).appendTo(a);
						} else {
							a = $('<a href="" class="mini">');
							if(val2['text']) {
								a.html(val2['text'] + temp);
							} else {
								a.html(val2['h3'] + temp);
							}
						}
						a.appendTo(li);
						li.appendTo(ul);
					})
					ul.appendTo(Dli);
					Dli.appendTo(Dul);
				})
				Dul.appendTo(obj)
				return;
			}
		});
	}

	// 添加三级选项卡 模版4------------------------------------------------------------
	function addTpl4(obj, key) {
		var Dul, Dli, ul, li, a;
		$.each(Myjson['tpl4'], function(name, val) {
			if(val['key'] == key) {
				Dul = $('<ul class="tpl4 clearfix">');
				$.each(val['items'], function(name1, val1) {
					Dli = $('<li>');
					$('<a href="">').html(val1['title1'] + " >").appendTo(Dli);
					ul = $('<ul>');
					$.each(val1['items1'], function(name2, val2) {
						if(val2['half'] == 'true') {
							li = $('<li class="half" >');
						} else {
							li = $('<li>');
						}
						$('<a href="">').html(val2['h3']).appendTo(li);
						li.appendTo(ul);
					})
					ul.appendTo(Dli);
					$('<a href="">').html(val1['title2'] + " >").appendTo(Dli);
					ul = $('<ul>');
					$.each(val1['items2'], function(name2, val2) {
						if(val2['half'] == 'true') {
							li = $('<li class="half">');
						} else {
							li = $('<li>');
						}
						$('<a href="">').html(val2['h3']).appendTo(li);
						li.appendTo(ul);
					})
					ul.appendTo(Dli);
					Dli.appendTo(Dul);
				});
				Dul.appendTo(obj);
				return;
			}
		})
	}

	function addtpl(obj, key, tplType) {
		switch(tplType) {
			case 'tpl1':
				addTpl1(obj, key);
				break;
			case 'tpl2':
				addTplASD(obj, key, 2);
				break;
			case 'tpl3':
				addTplASD(obj, key, 3);
				break;
			case 'tpl4':
				addTpl4(obj, key);
				break;
			case 'tpl5':
				addTplASD(obj, key, 5);
				break;
			case 'tpl6':
				addTpl6(obj, key);
				break;
		}
	}

	// 遍历添加模版------------------------------------------------------------
	function addPagedata() {
		var temp;
		$('.page_content>div').each(function() {
			temp = Myjson[$(this).attr('key')][0];
			if(temp['level1']) {
				addLevel($(this), temp['level1'], true, null, function(con, ret) {
					addtpl(con, ret['key'], ret['tplType']);
				})
			} else if(temp['tplType']) {
				addtpl($(this), temp['key'], temp['tplType']);
			}
		})
	}

	window.NaviPage = NaviPage;
}();

// 加载JSON
$.getJSON('./data/head.json', function(Myjson) {
	//	console.log(Myjson);
	NaviPage(Myjson);
});

//-----------------------------------------------------------------

! function() {
	var Myjson;
	var index = 1;

	function kvData(data) {
		Myjson = data;
		addDiv();
		$("#slide_aliyun").JhSlide({
			lengthways: true,
			moveDrag: false,
			bottomFocus: true,
			hideMoveBut: true,
			autoStopMove: false,
			autoTime: 5000,
			noMoveTransition: true,
			moveEndCallback: function(indexs) {
				index = indexs;
				$('.kv_content ul li').removeClass("foc");
				$('.kv_content ul li').eq(index).addClass("foc");
			}
		});
		$('.kv_content ul li').eq(1).addClass("foc");
		var offX, offY;
		var origX = $('.kv_content').width() * 1.2;
		var origY = $('.kv_content').height() * 0.4;
		var offsetLeft = $('.kv_content').offset().left + 0.5;
		$('.kv_content').on('mousemove', function(e) {
			offX = (origX - e.clientX - offsetLeft) / 103;
			offY = (e.clientY - origY) / 67;
			$('.kv_img').eq(index).css('transform', "rotateY(" + offX + "deg)  rotateX(" + offY + "deg)");
		})

	}

	function addDiv() {
		var content, Ddiv, ul, li, div, temp;
		content = $('<div class="kv_content maxWidth">');
		Ddiv = $('<div class="JHslide" id="slide_aliyun">').appendTo(content);
		ul = $('<ul>').appendTo(Ddiv);
		if(Myjson['list']) {
			$.each(Myjson['list'], function(name, val) {
				if(val['hoverTemplate'][0]) {
					li = $('<li>').appendTo(ul);
					div = $('<div class="kv_title">').appendTo(li);
					$('<h1>').html(val['hoverTemplate'][0]['title']).appendTo(div);
					$('<h2>').html(val['hoverTemplate'][0]['desc']).appendTo(div);
					$('<button class="kv_link">').html(val['hoverTemplate'][0]['btnText']).appendTo(div);
					div = $('<div class="kv_img">').appendTo(li);
					$.each(val['hoverTemplate'][0]['layer'], function(name2, val2) {
						temp = $('<div>').css('transform', 'translatez(' + val2['zIndex'] + 'px)').appendTo(div);
						$('<img>').attr('src', val2['src']).appendTo(temp);
					})
				}
			})
		}
		content.appendTo($('div.kv_wrap'))
	}
	window.addKvData = kvData;
}();

//加载轮播图JSON
$.getJSON('./data/kv.json', function(Myjson) {
	//	console.log(Myjson);
	addKvData(Myjson);
});

//---------------------------------------------------------------

// 加载产品页
!(function() {
	var MyJson;
	var Mproduct = $('.product');
	var pageIndex;

	function product(data) {
		MyJson = data;
		addTitel();
		addPageCon();

	}

	function addTitel() {
		$('<h1>').html(MyJson['moduleinfo']['titleTxt']).appendTo(Mproduct);
		$('<a href="">').html(MyJson['moduleinfo']['subTitleTxt']).appendTo(Mproduct);
	}

	function addPage(callBack) {
		if(!MyJson['layers']) {
			return;
		}
		var cDiv = $('<div class="product_warp">');
		var foc = 0;
		var Mstyle = "";
		var zDiv, zUl, zPage, zLi, zlDiv, pDiv;
		$.each(MyJson['layers'], function(name, val) {
			zDiv = $('<div class="layers">').attr('pro-id', val['id'])
			zUl = $('<ul class="clearfix maxWidth">').appendTo(zDiv);
			zPage = $('<div class="pro_page">').appendTo(zDiv);
			$.each(val['categories'], function(name2, val2) {
				zLi = $('<li>').appendTo(zUl);
				zlDiv = $('<div class="pro_list_con">').attr('key', val2['id']).appendTo(zLi);
				$('<div class="pro_icon">').appendTo(zlDiv);
				$('<div class="pro_title">').html(val2['name']).appendTo(zlDiv);
				pDiv = $('<div class="pro_page_con maxWidth clearfix">').attr('page-key', val2['id']).appendTo(zPage);
				callBack ? callBack(val2, pDiv) : null;
				Mstyle += '.pro_list_con[key="' + val2['id'] + '"] .pro_icon{\n' +
					'	background-image:url(' + val2['img'] + ');\n' +
					'}\n';
				Mstyle += '.pro_list_con[key="' + val2['id'] + '"].active .pro_icon{\n' +
					'	background-image:url(' + val2['imgActive'] + ');\n' +
					'}\n';
			})
			$('<span class="focus">').appendTo(zUl);
			zDiv.appendTo(cDiv);
		});
		$('.product').before($('<style>').html(Mstyle));
		cDiv.appendTo(Mproduct);
		$('.pro_page_con').hide();
		$('.product_warp .pro_list_con').on('click', function() {
			$('.product_warp .pro_list_con').removeClass('active');
			$(this).addClass('active');
			var $mthis = $(this);
			$(this).parent().nextAll('.focus').css('left', $mthis.position().left + $mthis.width() / 2 - 10);
		})
		$('.product_warp .pro_list_con').eq(0).triggerHandler('click');
	}

	function addPageCon() {
		addPage(function(val, con) {});
	}
	window.product = product;
})();

//加载product
$.getJSON('./data/product.json', function(Myjson) {
	console.log(Myjson);
	product(Myjson);
});